<template>
  <div class="page-publish">
    <div class="logo-area">
      <img :src="logo"
           @click="$router.push('/home')"
           alt="">
    </div>
    <!-- 标题区域 -->
    <div class="article-title">
      <el-input v-model="articleDatas.articleTitle"
                placeholder="请输入标题..."
                :rule="[{required:true}]"></el-input>
      <div class="publish-box">
        <button class="publish-btn"
                @click="publishArticle">发布</button>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="editor-area">
      <Toolbar class="toolbar"
               :editor="editor"
               :defaultConfig="toolbarConfig"
               :mode="mode" />
      <Editor class="editor"
              style="height: 400px; overflow-y: hidden;"
              v-model="articleDatas.articleContent"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated" />
    </div>

  </div>
</template>

<script>
import logo from '@/assets/images/logo.png'
import { publish } from '@/api/article' // 文章接口
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
  components: { Editor, Toolbar },
  data() {
    let that = this
    // 工具栏配置对象
    let toolbarConfig = {}
    toolbarConfig.excludeKeys = ['insertTable', 'insertVideo', 'codeBlock']
    // 编辑区配置对象
    let editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
    editorConfig.MENU_CONF['uploadImage'] = {
      fieldName: 'file',
      server: 'http://127.0.0.1:8081/upload', // 上传图片地址
      // 服务器自定义返回格式，做回调函数处理
      customInsert(res, insertFn) {
        console.log(res)
        if (!that.articleDatas.articleCover) {
          that.articleDatas.articleCover = res.data
        }
        insertFn(res.data)
      }
    }
    return {
      logo,
      editor: null,
      toolbarConfig,
      editorConfig,
      mode: 'simple', // or 'default'
      articleDatas: {
        // 文章内容
        articleContent: '',
        articleCover: '',
        articleTitle: ''
      }
    }
  },
  methods: {
    // 创建实例
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 发布文章
    async publishArticle() {
      if (this.articleDatas.articleContent && this.articleDatas.articleTitle) {
        console.log(this.articleDatas)
        let { data: res } = await publish(this.articleDatas)
        console.log(res)
        if (res.code == 200) {
          this.$router.push('/')
          this.$message('success', '发布成功')
        }
      } else {
        this.$message('warning', '请填写完整文章内容', 1000)
      }
    }
  },
  created() {},
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style scoped lang="less">
.titles {
  text-align: center;
}
/* logo图片 */
.logo-area {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  &::after {
    position: absolute;
    content: '';
    bottom: 0;
    width: 85%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc, #fff);
  }
  img {
    width: 130px;
    cursor: pointer;
  }
}
.page-publish {
  margin: 20px auto;
  width: 1000px;
  .article-title {
    display: flex;
    width: 100%;
    /* 标题输入框 */
    ::v-deep .el-input__inner {
      flex: 1;
      background-color: #fff;
      border-radius: 4px;
      box-sizing: border-box;
      color: #000;
      height: 60px;
      line-height: 60px;
      padding: 0 15px;
      border: none;
      outline: none;
      font-size: 18px;
    }
    /* 发布按钮 */
    .publish-box {
      display: flex;
      align-items: center;
      justify-content: end;
      width: 300px;
      .publish-btn {
        width: 80px;
        height: 38px;
        font-size: 16px;
        letter-spacing: 2px;
        text-indent: 2px;
        border: none;
        color: #fff;
        border-radius: 4px;
        background-color: #33c5c5;
      }
    }
  }
}

.editor-area {
  width: 100%;
  border: 1px solid #ccc;
}
.toolbar {
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
}
.editor {
  overflow-y: hidden;
}
</style>
